const {
    resolve
} = require('path'),
    htmlWebpackPlugin = require('html-webpack-plugin'),
    miniCssExtractPlugin = require('mini-css-extract-plugin'),
    optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
    uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 设置nodejs环境变量
// process.env.NODE_ENV = 'production';development
module.exports = {
    mode: 'development', //production
    entry: resolve(__dirname, './src/js/index.js'),
    output: {
        filename: 'index.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    miniCssExtractPlugin.loader, //取代style-loader 提取js中的css成单独文件
                    'css-loader',
                    // 处理css兼容性
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 图片小于10kb 将被解析为base64
                    limit: 10 * 1024,
                    esModule: false,
                    // 取图片哈希值前8位 ext 原扩展名
                    name: '[hash:8].[ext]',
                    outputPath: 'image'
                },
            },
            {
                test: /\.html$/,
                // 处理hmtl中的图片 需要将url-loader中 esModule设置为false
                // 因为html-loader使用common.js解析 url-loader默认使用es6模块化解析
                loader: 'html-loader'
            },
            {
                // 打包其他资源
                // exclude:/\.(css|js|html)$/,//排除
                test: /\.(eot|svg|ttf|woff)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media'
                }
            },
            // 语法检查 eslint
            {
                test:/\.js$/,
                loader:'eslint-loader',
                exclude:/node_modules/,
                options:{
                    enforce:'pre',
                    fix:true, //自动修复
                },
            },
            // babel
            {
                test: /\.js$/,
                loader:'babel-loader',
                include:resolve(__dirname,'src'),
                exclude:/node_modules/ 
            },
        ]
    },
    optimization: {
        minimizer: [
            new uglifyjsWebpackPlugin({
                cache: true, //是否缓存
                parallel: true, //并发打包
                sourceMap: false //调试
            }),
            new optimizeCssAssetsWebpackPlugin() //压缩css
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html'),
        }),
        new miniCssExtractPlugin({
            filename: 'css/built.css'
        }),
    ],
    devServer: {
        open: true,
        compress: true, //压缩
        host: 'localhost',
        // contentBase:resolve(__dirname,'dist'),//构建后目录
        port: 3000
    }
}